<template>
    <el-row class="productmanageedit">
        <el-col :span="24" class="content-header">商品管理--修改商品
            <span class="left-10">
                <el-button type="text" @click="global.goPage($router, 'productmanage', {});">返回</el-button>
            </span>
        </el-col>
        <el-card class="box">
            <el-tabs tab-position="top" style="height: 100%;">
                <el-tab-pane label="基本信息">
                    <el-form :model="productBasicInfo" :label-position="labelPosition" label-width="100px">
                        <el-col :span="12">
                            <el-form-item label="ERP编号">
                                <el-input v-model="productBasicInfo.erpId" placeholder="ERP编号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="条形码">
                                <el-input v-model="productBasicInfo.barCode" placeholder="条形码"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="名称">
                                <el-input v-model="productBasicInfo.name" placeholder="名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="类别">
                                <el-input v-model="productBasicInfo.category" placeholder="类别"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="单位">
                                <el-input v-model="productBasicInfo.unit" placeholder="单位"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="是否新品">
                                <el-select v-model="productBasicInfo.isNew" placeholder="是否新品">
                                    <el-option label="是" value="1"></el-option>
                                    <el-option label="否" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="是否打包">
                                <el-select v-model="productBasicInfo.isPackage" placeholder="是否打包">
                                    <el-option label="是" value="1"></el-option>
                                    <el-option label="否" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="打包数量">
                                <el-input v-model="productBasicInfo.packageNumber" placeholder="打包数量"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="重量">
                                <el-input v-model="productBasicInfo.weight" placeholder="重量"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="商品品牌">
                                <el-select v-model="productBasicInfo.brandId" placeholder="商品品牌">
                                    <el-option label="品牌1" value="1"></el-option>
                                    <el-option label="品牌2" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="简介">
                                <el-input type="textarea" v-model="productBasicInfo.synopsis" placeholder="简介" style="width : 100%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="主图">
                                <el-upload ref="headUpload" :limit="1" :on-exceed="handleExceed" :before-upload="beforeAvatarUpload" action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList" :auto-upload="false" list-type="picture">
                                    <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
                                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="采购价">
                                <el-input v-model="productBasicInfo.purchasePrice" placeholder="采购价"></el-input>
                            </el-form-item>
                        </el-col>  
                        <el-col :span="12">
                            <el-form-item label="零售价">
                                <el-input v-model="productBasicInfo.retailPrice" placeholder="零售价"></el-input>
                            </el-form-item>
                        </el-col>  
                        <el-col :span="12">
                            <el-form-item label="所属账套">
                                <el-select v-model="productBasicInfo.accountType" placeholder="商品品牌">
                                    <el-option label="账套一" value="1"></el-option>
                                    <el-option label="账套二" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col> 
                        <el-col :span="12">
                        <el-form-item label="销量">
                            <el-input v-model="productBasicInfo.salesVolume" placeholder="支付宝账号"></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="24">
                        <el-form-item label="页面标题">
                            <el-input v-model="productBasicInfo.pageTitle" placeholder="页面标题"></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="24">
                        <el-form-item label="页面描述">
                            <el-input v-model="productBasicInfo.pageDescribe" placeholder="页面描述"></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="24">
                        <el-form-item label="页面关键字">
                            <el-input v-model="productBasicInfo.pageKeyword" placeholder="页面关键字"></el-input>
                        </el-form-item>
                        </el-col>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="商品介绍">
                    <el-row>
                        <el-col :span="24">
                            <quill-editor ref="myTextEditor" :content="productBasicInfo.introduce" :options="editorOption">
                            </quill-editor>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="商品图片">
                    <el-row>
                        <el-col :span="24">
                            <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :file-list="fileList":on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="beforeAvatarUpload">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible" size="tiny">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="商品属性">商品属性</el-tab-pane>
                <el-tab-pane label="商品参数">商品参数</el-tab-pane>
            </el-tabs>
            <el-row>
                <el-col :span="12" :offset="11" class="top-10">
                        <el-button type="primary" @click="submitProductInfo" size="small" >保存</el-button>
                </el-col>
            </el-row>
        </el-card>
    </el-row>
</template>
<script>

import './edit.scss';
import router from '@/router/index';

export default {
    data() {
        return {
            productNo : "",
            labelPosition: "rigth",
            productBasicInfo: {
                erpId: "",
                barCode: "",
                name: "",
                category: "",
                unit: "",
                isNew: "",
                isPackage: "",
                packageNumber: "",
                weight: "",
                brandId: "",
                synopsis: "",
                purchasePrice: "",
                retailPrice: "",
                accountType: "",
                salesVolume: "",
                pageTitle: "",
                pageDescribe: "",
                pageKeyword: "",

                introduce : "<p>内容介绍</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>"
            },
            fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
            editorOption: {             },
            dialogVisible : false,
            dialogImageUrl : "",
        }
    },
    methods: {
        submitProductInfo: function() {

        },
        handleExceed: function() {

        },
        beforeAvatarUpload: function() {

        },
        submitUpload: function() {

        },
        handleRemove: function(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview: function(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        beforeAvatarUpload: function(file){
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    },
    watch: {

    },
    mounted: function() {

    },
    created: function() {
        this.productNo = this.$route.params.productNo;
        console.info(this.productNo);
    },
    beforeDestroy: function() {

    }
}
</script>